<template>
  <div class="home">
    <!-- 欢迎横幅 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1>在线工具集合</h1>
        <p>提供各种实用的在线工具，让您的工作更加高效便捷</p>
        <el-button type="primary" size="large" @click="goToTools">
          <el-icon>
            <Tools />
          </el-icon>
          开始使用工具
        </el-button>
      </div>
    </div>

    <!-- 工具分类 -->
    <div class="tools-section">
      <div class="section-title">
        <h2>工具分类</h2>
        <p>选择您需要的工具类型</p>
      </div>

      <div class="tools-grid">
        <div v-for="category in toolCategories" :key="category.name" class="tool-card"
          @click="goToCategory(category.name)">
          <div class="tool-icon">
            <el-icon :size="40">
              <component :is="category.icon" />
            </el-icon>
          </div>
          <h3>{{ category.title }}</h3>
          <p>{{ category.description }}</p>
          <div class="tool-count">{{ category.count }} 个工具</div>
        </div>
      </div>
    </div>

    <!-- 热门工具 -->
    <div class="popular-tools">
      <div class="section-title">
        <h2>热门工具</h2>
        <p>最受欢迎的工具推荐</p>
      </div>

      <div class="tools-list">
        <div v-for="tool in popularTools" :key="tool.name" class="tool-item" @click="goToTool(tool)">
          <div class="tool-info">
            <h4>{{ tool.title }}</h4>
            <p>{{ tool.description }}</p>
          </div>
          <div class="tool-stats">
            <el-tag type="success" size="small">{{ tool.category }}</el-tag>
            <span class="usage-count">{{ tool.usage }} 次使用</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  Tools,
  Document,
  Picture,
  Operation,
  Link,
  Edit,
  Timer,
  Download,
  Sort
} from '@element-plus/icons-vue'

const router = useRouter()

const toolCategories = ref([
  {
    name: 'text',
    title: '文本工具',
    description: '文本处理、编码解码、格式化等',
    icon: 'Document',
    count: 16
  },
  {
    name: 'image',
    title: '图片工具',
    description: '图片处理、格式转换、压缩等',
    icon: 'Picture',
    count: 5
  },
  {
    name: 'calculator',
    title: '计算工具',
    description: '各种计算器、单位转换等',
    icon: 'Operation',
    count: 6
  },
  {
    name: 'time',
    title: '时间工具',
    description: '日期计算、节假日查询等',
    icon: 'Timer',
    count: 6
  },
  {
    name: 'network',
    title: '网络工具',
    description: 'URL处理、网络检测等',
    icon: 'Link',
    count: 4
  },
  {
    name: 'developer',
    title: '开发工具',
    description: '代码格式化、加密解密等',
    icon: 'Edit',
    count: 9
  },
  {
    name: 'converter',
    title: '换算工具',
    description: '各种单位换算、进制转换等',
    icon: 'Sort',
    count: 1
  },
  {
    name: 'other',
    title: '其他工具',
    description: '文件处理、效率工具等',
    icon: 'Download',
    count: 3
  }
])

const popularTools = ref([
  {
    name: 'json-formatter',
    title: 'JSON格式化',
    description: '格式化、验证和美化JSON数据',
    category: '开发工具',
    usage: 12580
  },
  {
    name: 'base64-encode',
    title: 'Base64编码解码',
    description: '快速进行Base64编码和解码操作',
    category: '文本工具',
    usage: 11200
  },
  {
    name: 'md5-encrypt',
    title: 'MD5加密工具',
    description: '快速进行MD5哈希加密',
    category: '文本工具',
    usage: 9876
  },
  {
    name: 'password-generator',
    title: '密码生成器',
    description: '生成安全的随机密码',
    category: '开发工具',
    usage: 8765
  },
  {
    name: 'url-encode',
    title: 'URL编码解码',
    description: '快速进行URL编码和解码操作',
    category: '文本工具',
    usage: 7654
  },
  {
    name: 'qr-generator',
    title: '二维码生成器',
    description: '快速生成各种样式的二维码',
    category: '图片工具',
    usage: 6543
  }
])

const goToTools = () => {
  console.log('跳转到工具列表页面')
  router.push('/tools')
}

const goToCategory = (categoryName) => {
  console.log('跳转到分类:', categoryName)
  router.push(`/tools/${categoryName}`)
}

const goToTool = (tool) => {
  console.log('点击工具:', tool)
  // 根据工具名称跳转到对应页面
  const toolRoutes = {
    'json-formatter': '/tool/json-formatter',
    'base64-encode': '/tool/base64',
    'text-case': '/tool/text-case',
    'color-picker': '/tool/color-picker',
    'qr-generator': '/tool/qr-generator',
    'password-generator': '/tool/password-generator',
    'md5-encrypt': '/tool/md5',
    'url-encode': '/tool/url'
  }

  const route = toolRoutes[tool.name]
  if (route) {
    console.log('跳转到工具页面:', route)
    router.push(route)
  } else {
    console.log('未找到工具路由:', tool.name)
  }
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 80px 20px;
  border-radius: 12px;
  margin-bottom: 60px;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  font-weight: bold;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.section-title h2 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
}

.section-title p {
  color: #666;
  font-size: 1.1rem;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 80px;
}

.tool-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.tool-icon {
  color: #667eea;
  margin-bottom: 20px;
}

.tool-card h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 15px;
}

.tool-card p {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.tool-count {
  background: #f8f9fa;
  color: #667eea;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
}

.tools-list {
  display: grid;
  gap: 20px;
}

.tool-item {
  background: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.tool-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.tool-info h4 {
  color: #333;
  margin-bottom: 8px;
  font-size: 1.2rem;
}

.tool-info p {
  color: #666;
  margin: 0;
}

.tool-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.usage-count {
  color: #999;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }

  .tool-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .tool-stats {
    align-items: flex-start;
  }
}
</style>
